<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定标签属性</title>
</head>

<body>
    <!-- 创建dmo根节点，一个页面中需要有一个根节点，这个节点下的内容会被react管理 -->
    <div id="app"></div>
</body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<!-- 使用react语法（jsx），记得type="text/babel" -->
<script type="text/babel">

    const object = {
        href: "http://www.baidu.com",
        title: "有问题？百度一下",
        target: "_blank"
    }

    /* 
       {}使用表达式
    */
    let myDom = 
        (<div>
            <a href={object.href} target={object.target}>{object.title}</a>
            <br/>
            <a {...object}>{object.title}</a>
        </div>);

    // React17以前
    // ReactDOM.render(myDom, document.getElementById("app"));

    // React17以后创建根节点
    let root = ReactDOM.createRoot(document.getElementById("app"));

    // 渲染jsx对象
    root.render(myDom);
</script>

</html>